<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-menu margin-bottom-10">
      <p class="margin-left-right-16 margin-top-10">菜单栏背景</p>
      <switch-normal v-model="commonAttr.isFixed" label="是否吸顶" @change="onChangeAttr"></switch-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" label="字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.selectedColor" label="选中字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.seletedBgColor" label="选中背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <input-normal label="边距" placeholder="上 右 下 左" v-model="commonAttr.margin" @change="onChangeAttr"></input-normal>
      <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>

      <el-divider content-position="center">按钮区设置</el-divider>
      <input-normal label="图片宽度" v-model="commonAttr.width" @change="onChangeAttr"></input-normal>
      <input-normal label="图片高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
      <textarea-normal v-if="lists[0].eventType == 'compVisibleInComps'" label="高度组件参数" placeholder='影响高度组件参数：{"distanceBottom":500,"compId":""}' v-model="commonAttr.heightEffectParams" @change="onChangeAttr"></textarea-normal>
      
      <el-button type="primary" @click.stop="onAddItem" class="margin-left-right-16 margin-bottom-10" icon="Plus">增加按钮区</el-button>
       <input-normal label="滚动父组件id" v-model="commonAttr.baseCompId" @change="onChangeAttr"></input-normal>
      <input-normal label="默认选中tab索引" v-model="commonAttr.tabIndex" @change="onChangeAttr"></input-normal>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="'drag_'+index" class="list-group-item">
            <template #title>
            按钮区{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <p class="margin-left-right-16 margin-top-10">按钮图片</p>
          <add-img-con :url="item.url" picAttr="url" :index="index" :height="100" :isCrop="false" :isDelete="true" class="margin-left-right-16"></add-img-con>
          <p class="margin-left-right-16 margin-top-10">选中按钮图片</p>
          <add-img-con :url="item.selectedBgUrl" picAttr="selectedBgUrl" :index="index" :height="100" :isCrop="false" :isDelete="true" class="margin-left-right-16"></add-img-con>
          <div v-if="!item.url">
            <input-normal class="margin-top-10" :placeholder="item.icon" label="菜单图标" v-model="item.icon" @change="onUpdateItem(index)"></input-normal>
            <input-normal class="margin-top-10" label="按钮名" v-model="item.title" @change="onUpdateItem(index)"></input-normal>
          </div>
          <dropdown-normal label="操作类型" :valLists="MENU_PATTERN" v-model="item.eventType" @change="onChangeDropdown(index)"></dropdown-normal>
          <component
            v-if="getCompType(item.eventType) == 'DropdownNormal'"
            class="margin-top-10"
            :is="getCompType(item.eventType)"
            :label="getLabel(item.eventType)"
            v-model="item.value"
            :valLists="getLists(item.eventType)"
            @change="onUpdateItem(index)"
          ></component>
          <component
            v-else
            class="margin-top-10"
            :is="getCompType(item.eventType)"
            :placeholder="getPlaceholder(item.eventType)"
            :label="getLabel(item.eventType)"
            v-model="item.value"
            @change="onUpdateItem(index)"
          ></component>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { ROTATE3D_LIST, MENU_PATTERN } from '@/const/web/'
import { ComponentTypesDefaultDom } from '@/store/models/component-default-data'
import { pushPages, pushPops } from '@/views/ts/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const getMenuItemByEventType = (eventType: string) => {
  let item: any
  for(let i = 0; i < MENU_PATTERN.length; i++) {
    item = MENU_PATTERN[i]
    if(item.eventType == eventType) {
      return item
    }
  }
  return item
}
const getLists = (eventType: string) => {
  let list = []
  if (eventType == "layer") {
    pushPops(list)
  } else if (eventType == "anchor") {
    pushPages(list)
  }
  return list
}
const onChangeDropdown = (index: number) => {
  const lists = useWebComponent.currentComponentData!.lists
  lists[index].value = ''
  onUpdateItem(index)
}
const getPlaceholder = (eventType: string) => {
  const item = getMenuItemByEventType(eventType)
  return item.placeholder
}
const getLabel = (eventType: string) => {
  const item = getMenuItemByEventType(eventType)
  return item.label;
}
const getCompType = (eventType: string) => {
  const item = getMenuItemByEventType(eventType)
  return item.compType;
}

const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const activeNames = [1]
const lists = computed(() => {
  return useWebComponent.currentComponentData!.lists
})
const onAddItem = () => {
  let item: IListItem
  if(componentData_.events.rotate3d) {
    item = _.cloneDeep(ROTATE3D_LIST[0])
  } else {
    item = _.cloneDeep(ComponentTypesDefaultDom[componentData_.cid].lists[0])
  }
  if(componentData_.lists && componentData_.lists[0]) {
    item = _.cloneDeep(componentData_.lists[0])
  }
  if(item){
    useWebComponent.addComponentItem(item)
  }
}
const onUpdateItem = (index: number) => {
  useWebComponent.updateComponentItem({ index, item: componentData_.lists[index] })
}
const onDeleteItem = (index: number) => {
  useWebComponent.deleteComponentItem({index})
}
</script>
